<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="logo">
        <el-icon size="24"><Medal /></el-icon>
        运动会管理系统
      </div>
      <div class="flex-grow"></div>
      <div class="user-info">
        <el-dropdown trigger="click">
          <div class="user-avatar">
            <el-avatar :size="40" :src="avatarUrl" icon="UserFilled"></el-avatar>
            <span class="username">{{ currentUser?.realName || '管理员' }}</span>
            <el-icon><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleLogout">
                <el-icon><SwitchButton /></el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <!-- 左侧导航栏 -->
    <nav class="sidebar">
      <div class="menu-item" :class="{ active: $route.path === '/admin' }" @click="navigateTo('/admin')">
        <el-icon><Monitor /></el-icon>
        <span>系统管理</span>
      </div>
      <div class="menu-item active">
        <el-icon><Folder /></el-icon>
        <span>文件管理</span>
      </div>
      <div class="menu-item" :class="{ active: $route.path === '/admin/certificates' }" @click="navigateTo('/admin/certificates')">
        <el-icon><Document /></el-icon>
        <span>证书管理</span>
      </div>
    </nav>

    <!-- 主要内容 -->
    <main class="content">
      <!-- 页面标题和操作按钮 -->
      <div class="page-header">
        <div class="page-title">
          <h1>文件管理</h1>
          <p class="page-desc">管理系统文件，支持上传、下载、预览和处理功能</p>
        </div>
        <div class="header-actions">
          <el-button type="success" @click="handleExportFiles" :loading="exportLoading">
            <el-icon><Download /></el-icon> 导出文件列表
          </el-button>
          <el-button type="primary" @click="showUploadDialog = true">
            <el-icon><Upload /></el-icon> 上传文件
          </el-button>
        </div>
      </div>

      <!-- 存储空间统计 -->
      <el-row :gutter="20" class="statistics-row">
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-item">
              <div class="stat-icon primary">
                <el-icon><FolderOpened /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ storageStats.totalFiles }}</div>
                <div class="stat-label">文件总数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-item">
              <div class="stat-icon success">
                <el-icon><DataLine /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ formatFileSize(storageStats.totalSize) }}</div>
                <div class="stat-label">存储空间</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-item">
              <div class="stat-icon warning">
                <el-icon><Picture /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ storageStats.imageFiles }}</div>
                <div class="stat-label">图片文件</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-item">
              <div class="stat-icon danger">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ storageStats.documentFiles }}</div>
                <div class="stat-label">文档文件</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 搜索和筛选区域 -->
      <el-card class="search-card" shadow="hover">
        <el-form :model="searchForm" inline>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="6">
              <el-form-item label="文件名">
                <el-input
                  v-model="searchForm.fileName"
                  placeholder="请输入文件名"
                  clearable
                  :prefix-icon="Document"
                  @keyup.enter="handleSearch">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6">
              <el-form-item label="文件类型">
                <el-select
                  v-model="searchForm.fileType"
                  placeholder="请选择文件类型"
                  clearable
                  style="width: 100%">
                  <el-option label="图片" value="image">
                    <el-tag type="success" size="small">图片</el-tag>
                  </el-option>
                  <el-option label="文档" value="document">
                    <el-tag type="primary" size="small">文档</el-tag>
                  </el-option>
                  <el-option label="证书" value="certificate">
                    <el-tag type="warning" size="small">证书</el-tag>
                  </el-option>
                  <el-option label="其他" value="other">
                    <el-tag type="info" size="small">其他</el-tag>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6">
              <el-form-item label="上传用户">
                <el-input
                  v-model="searchForm.uploadUserName"
                  placeholder="请输入用户名"
                  clearable
                  :prefix-icon="UserFilled"
                  @keyup.enter="handleSearch">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6">
              <el-form-item label="关联类型">
                <el-select
                  v-model="searchForm.relatedType"
                  placeholder="请选择关联类型"
                  clearable
                  style="width: 100%">
                  <el-option label="奖项" value="award" />
                  <el-option label="报名" value="enrollment" />
                  <el-option label="用户" value="user" />
                  <el-option label="项目" value="project" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6">
              <el-form-item>
                <el-button type="primary" @click="handleSearch" :loading="loading">
                  <el-icon><Search /></el-icon> 搜索
                </el-button>
                <el-button @click="handleReset">
                  <el-icon><Refresh /></el-icon> 重置
                </el-button>
                <el-button type="info" @click="toggleAdvancedSearch">
                  <el-icon><Operation /></el-icon> {{ showAdvancedSearch ? '收起' : '高级' }}
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 高级搜索区域 -->
          <el-collapse-transition>
            <div v-show="showAdvancedSearch" class="advanced-search">
              <el-divider content-position="left">高级搜索</el-divider>
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :md="6">
                  <el-form-item label="文件大小">
                    <el-select
                      v-model="searchForm.sizeRange"
                      placeholder="请选择文件大小范围"
                      clearable
                      style="width: 100%">
                      <el-option label="小于1MB" value="lt_1mb" />
                      <el-option label="1-10MB" value="1_10mb" />
                      <el-option label="10-50MB" value="10_50mb" />
                      <el-option label="大于50MB" value="gt_50mb" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="6">
                  <el-form-item label="上传时间">
                    <el-date-picker
                      v-model="searchForm.dateRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      style="width: 100%"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-transition>
        </el-form>
      </el-card>

      <!-- 文件数据表格 -->
      <el-card class="table-card" shadow="hover">
        <!-- 工具栏 -->
        <div class="table-toolbar">
          <div class="table-info">
            <span class="table-title">文件列表</span>
            <el-tag type="info" size="small">共 {{ pagination.total }} 条记录</el-tag>
          </div>
          <div class="table-actions">
            <el-button-group>
              <el-button
                :size="tableSize"
                @click="tableSize = 'large'"
                :class="{ 'is-active': tableSize === 'large' }">
                大
              </el-button>
              <el-button
                :size="tableSize"
                @click="tableSize = 'default'"
                :class="{ 'is-active': tableSize === 'default' }">
                中
              </el-button>
              <el-button
                :size="tableSize"
                @click="tableSize = 'small'"
                :class="{ 'is-active': tableSize === 'small' }">
                小
              </el-button>
            </el-button-group>
            <el-button
              :icon="RefreshRight"
              @click="fetchFileList"
              :loading="loading"
              circle>
            </el-button>
          </div>
        </div>

        <!-- 表格主体 -->
        <el-table
          :data="fileList"
          v-loading="loading"
          :height="tableHeight"
          stripe
          border
          :size="tableSize"
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column type="selection" width="55" align="center" fixed="left"></el-table-column>
          <el-table-column prop="fileName" label="文件名" width="200" align="center" show-overflow-tooltip>
            <template #default="scope">
              <div class="file-name">
                <el-icon class="file-icon">
                  <component :is="getFileIcon(scope.row.fileType)" />
                </el-icon>
                <el-link type="primary" @click="handleViewDetail(scope.row)">{{ scope.row.fileName }}</el-link>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="originalName" label="原始名称" width="250" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="fileType" label="类型" width="100" align="center">
            <template #default="scope">
              <el-tag :type="getFileTypeTag(scope.row.fileType)" size="small">
                {{ getFileTypeText(scope.row.fileType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="fileSize" label="大小" width="120" align="center">
            <template #default="scope">
              {{ formatFileSize(scope.row.fileSize) }}
            </template>
          </el-table-column>
          <el-table-column prop="uploadUserName" label="上传用户" width="120" align="center">
            <template #default="scope">
              <el-avatar :size="24" icon="UserFilled"></el-avatar>
              <span style="margin-left: 8px">{{ scope.row.uploadUserName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="relatedType" label="关联类型" width="100" align="center">
            <template #default="scope">
              <el-tag type="info" size="small">{{ getRelatedTypeText(scope.row.relatedType) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="上传时间" width="180" align="center">
            <template #default="scope">
              {{ formatDateTime(scope.row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300" align="center" fixed="right">
            <template #default="scope">
              <el-button-group>
                <el-tooltip content="查看详情" placement="top">
                  <el-button
                    type="primary"
                    :icon="View"
                    size="small"
                    @click="handleViewDetail(scope.row)">
                  </el-button>
                </el-tooltip>
                <el-tooltip content="预览" placement="top" v-if="scope.row.fileType === 'image'">
                  <el-button
                    type="success"
                    :icon="ZoomIn"
                    size="small"
                    @click="handlePreview(scope.row)">
                  </el-button>
                </el-tooltip>
                <el-tooltip content="下载" placement="top">
                  <el-button
                    type="primary"
                    :icon="Download"
                    size="small"
                    @click="handleDownload(scope.row)">
                  </el-button>
                </el-tooltip>
                <el-tooltip content="图片处理" placement="top" v-if="scope.row.fileType === 'image'">
                  <el-button
                    type="warning"
                    :icon="Picture"
                    size="small"
                    @click="handleImageProcess(scope.row)">
                  </el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                  <el-button
                    type="danger"
                    :icon="Delete"
                    size="small"
                    @click="handleDelete(scope.row)">
                  </el-button>
                </el-tooltip>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页控制 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background>
          </el-pagination>
        </div>

        <!-- 批量操作栏 -->
        <div class="batch-operations" v-if="selectedFiles.length > 0">
          <div class="batch-info">
            <el-icon><Select /></el-icon>
            <span>已选择 {{ selectedFiles.length }} 项</span>
          </div>
          <div class="batch-actions">
            <el-button-group>
              <el-button type="primary" @click="handleBatchDownload" :loading="batchLoading">
                <el-icon><Download /></el-icon> 批量下载
              </el-button>
              <el-button type="danger" @click="handleBatchDelete" :loading="batchLoading">
                <el-icon><Delete /></el-icon> 批量删除
              </el-button>
            </el-button-group>
          </div>
        </div>
      </el-card>

    <!-- 上传文件对话框 -->
    <el-dialog
      v-model="showUploadDialog"
      title="上传文件"
      width="600px"
      :before-close="handleDialogClose"
      :close-on-click-modal="false"
      destroy-on-close>
      <el-form
        :model="uploadForm"
        :rules="uploadFormRules"
        ref="uploadFormRef"
        label-width="100px"
        :size="formSize">
        <el-form-item label="选择文件" prop="files">
          <el-upload
            ref="uploadRef"
            :auto-upload="false"
            :multiple="true"
            :limit="10"
            :on-exceed="handleExceed"
            :on-change="handleFileChange"
            :on-remove="handleFileRemove"
            :file-list="fileListToUpload"
            drag
            action="">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持jpg/png/pdf/doc/docx等格式，单个文件不超过50MB，最多上传10个文件<br>
                <el-tag type="success" size="small">图片文件将自动压缩优化</el-tag>
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="关联类型" prop="relatedType">
          <el-select
            v-model="uploadForm.relatedType"
            placeholder="请选择关联类型"
            style="width: 100%">
            <el-option label="奖项" value="award">
              <el-tag type="warning" size="small">奖项</el-tag>
            </el-option>
            <el-option label="报名" value="enrollment">
              <el-tag type="primary" size="small">报名</el-tag>
            </el-option>
            <el-option label="用户" value="user">
              <el-tag type="success" size="small">用户</el-tag>
            </el-option>
            <el-option label="项目" value="project">
              <el-tag type="info" size="small">项目</el-tag>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联ID" prop="relatedId" v-if="uploadForm.relatedType">
          <el-input-number
            v-model="uploadForm.relatedId"
            :min="1"
            placeholder="请输入关联ID"
            style="width: 100%" />
        </el-form-item>
        <el-form-item label="文件描述">
          <el-input
            v-model="uploadForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入文件描述"
            maxlength="200"
            show-word-limit />
        </el-form-item>
        <el-form-item label="访问权限">
          <el-radio-group v-model="uploadForm.accessLevel">
            <el-radio label="public">公开</el-radio>
            <el-radio label="private">私有</el-radio>
            <el-radio label="restricted">受限</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleDialogClose">取消</el-button>
          <el-button type="primary" @click="handleUpload" :loading="uploading">
            {{ uploading ? '上传中...' : '确定上传' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 文件详情对话框 -->
    <el-dialog
      title="文件详情"
      v-model="showDetailDialog"
      width="600px">
      <div v-if="currentFile" class="file-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="文件名">{{ currentFile.fileName }}</el-descriptions-item>
          <el-descriptions-item label="原始名称">{{ currentFile.originalName }}</el-descriptions-item>
          <el-descriptions-item label="文件类型">
            <el-tag :type="getFileTypeTag(currentFile.fileType)">
              {{ getFileTypeText(currentFile.fileType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="文件大小">{{ formatFileSize(currentFile.fileSize) }}</el-descriptions-item>
          <el-descriptions-item label="上传用户">{{ currentFile.uploadUserName }}</el-descriptions-item>
          <el-descriptions-item label="关联类型">{{ getRelatedTypeText(currentFile.relatedType) }}</el-descriptions-item>
          <el-descriptions-item label="上传时间" :span="2">{{ formatDateTime(currentFile.createdAt) }}</el-descriptions-item>
          <el-descriptions-item label="文件描述" :span="2">{{ currentFile.description || '无' }}</el-descriptions-item>
        </el-descriptions>

        <!-- 图片预览 -->
        <div v-if="currentFile.fileType === 'image' && previewImageUrl" class="image-preview">
          <el-divider content-position="left">图片预览</el-divider>
          <el-image
            :src="previewImageUrl"
            fit="contain"
            style="width: 100%; max-height: 400px;"
            :preview-src-list="[previewImageUrl]"
            preview-teleported>
          </el-image>
        </div>
      </div>
    </el-dialog>

    <!-- 图片预览对话框 -->
    <el-dialog
      v-model="showPreviewDialog"
      title="图片预览"
      width="80%">
      <div class="preview-container">
        <el-image
          :src="previewImageUrl"
          fit="contain"
          style="width: 100%; height: 500px;"
          :preview-src-list="[previewImageUrl]"
          preview-teleported>
        </el-image>
      </div>
    </el-dialog>

    <!-- 图片处理对话框 -->
    <el-dialog
      v-model="showImageProcessDialog"
      title="图片处理"
      width="700px"
      :close-on-click-modal="false">
      <el-tabs v-model="activeProcessTab" type="border-card">
        <el-tab-pane label="压缩优化" name="compress">
          <el-form :model="processForm.compress" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="压缩质量">
                  <el-slider
                    v-model="processForm.compress.quality"
                    :min="0.1"
                    :max="1"
                    :step="0.1"
                    :format-tooltip="formatQuality"
                    show-input />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预估压缩后大小">
                  <el-tag type="info">{{ estimateCompressedSize() }}</el-tag>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="最大宽度">
                  <el-input-number
                    v-model="processForm.compress.maxWidth"
                    :min="100"
                    :max="3000"
                    style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最大高度">
                  <el-input-number
                    v-model="processForm.compress.maxHeight"
                    :min="100"
                    :max="3000"
                    style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="保持宽高比">
              <el-switch v-model="processForm.compress.maintainAspectRatio" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="缩略图生成" name="thumbnail">
          <el-form :model="processForm.thumbnail" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="宽度">
                  <el-input-number
                    v-model="processForm.thumbnail.width"
                    :min="50"
                    :max="500"
                    style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="高度">
                  <el-input-number
                    v-model="processForm.thumbnail.height"
                    :min="50"
                    :max="500"
                    style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="裁剪模式">
              <el-radio-group v-model="processForm.thumbnail.cropMode">
                <el-radio label="cover">覆盖</el-radio>
                <el-radio label="contain">包含</el-radio>
                <el-radio label="fill">填充</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="水印添加" name="watermark">
          <el-form :model="processForm.watermark" label-width="120px">
            <el-form-item label="水印类型">
              <el-radio-group v-model="processForm.watermark.type">
                <el-radio label="text">文字水印</el-radio>
                <el-radio label="image">图片水印</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="水印文字" v-if="processForm.watermark.type === 'text'">
              <el-input
                v-model="processForm.watermark.text"
                placeholder="请输入水印文字"
                maxlength="50"
                show-word-limit />
            </el-form-item>
            <el-form-item label="位置">
              <el-select v-model="processForm.watermark.position" style="width: 100%">
                <el-option label="左上角" value="top-left" />
                <el-option label="右上角" value="top-right" />
                <el-option label="左下角" value="bottom-left" />
                <el-option label="右下角" value="bottom-right" />
                <el-option label="居中" value="center" />
              </el-select>
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="透明度">
                  <el-slider
                    v-model="processForm.watermark.opacity"
                    :min="0.1"
                    :max="1"
                    :step="0.1"
                    :format-tooltip="formatOpacity" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="大小">
                  <el-slider
                    v-model="processForm.watermark.size"
                    :min="10"
                    :max="100"
                    :step="5"
                    show-input />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="颜色" v-if="processForm.watermark.type === 'text'">
              <el-color-picker v-model="processForm.watermark.color" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showImageProcessDialog = false">取消</el-button>
          <el-button type="primary" @click="handleImageProcessConfirm" :loading="processing">
            {{ processing ? '处理中...' : '确定处理' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    </main>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  // 图标组件
  Medal, Folder, Document, Monitor, ArrowDown, SwitchButton, Download, Upload,
  Search, Refresh, Operation, UserFilled, View, Delete, Select, ZoomIn,
  Picture, FolderOpened, DataLine, RefreshRight, UploadFilled
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

// 导入API接口
import {
  getFileList, uploadFile, uploadFiles, downloadFile, deleteFile, previewFile,
  compressImage, generateThumbnail, addWatermark, getUserFileStatistics
} from '@/api/file'

// 导入图片压缩工具
import { compressImages } from '@/utils/imageUtils'

// 路由和状态管理
const router = useRouter()
const authStore = useAuthStore()

// 响应式数据
const loading = ref(false)
const uploading = ref(false)
const processing = ref(false)
const exportLoading = ref(false)
const batchLoading = ref(false)
const fileList = ref([])
const showUploadDialog = ref(false)
const showPreviewDialog = ref(false)
const showImageProcessDialog = ref(false)
const showDetailDialog = ref(false)
const showAdvancedSearch = ref(false)
const tableSize = ref('default')
const formSize = ref('default')
const previewImageUrl = ref('')
const activeProcessTab = ref('compress')
const currentFile = ref(null)
const selectedFiles = ref([])
const uploadRef = ref()
const uploadFormRef = ref()
const fileListToUpload = ref([])

// 表格高度
const tableHeight = ref(600)

// 搜索表单
const searchForm = reactive({
  fileName: '',
  fileType: '',
  uploadUserName: '',
  relatedType: '',
  sizeRange: '',
  dateRange: null
})

// 上传表单
const uploadForm = reactive({
  relatedType: '',
  relatedId: null,
  description: '',
  accessLevel: 'public'
})

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 存储空间统计
const storageStats = reactive({
  totalFiles: 0,
  totalSize: 0,
  imageFiles: 0,
  documentFiles: 0
})

// 图片处理表单
const processForm = reactive({
  compress: {
    quality: 0.8,
    maxWidth: 1920,
    maxHeight: 1080,
    maintainAspectRatio: true
  },
  thumbnail: {
    width: 200,
    height: 200,
    cropMode: 'cover'
  },
  watermark: {
    type: 'text',
    text: '',
    position: 'bottom-right',
    opacity: 0.5,
    size: 30,
    color: '#FFFFFF'
  }
})

  // 计算属性
const currentUser = computed(() => authStore.userInfo || JSON.parse(localStorage.getItem('user')))
const avatarUrl = computed(() => '/img/jstu1.webp')

// 表单验证规则
const uploadFormRules = reactive({
  files: [
    { required: true, message: '请选择要上传的文件', trigger: 'change' }
  ],
  relatedType: [
    { required: true, message: '请选择关联类型', trigger: 'change' }
  ]
})

// 设置表格高度
const setTableHeight = () => {
  // 桌面端表格高度设置
  tableHeight.value = window.innerHeight - 350
}

// 切换高级搜索
const toggleAdvancedSearch = () => {
  showAdvancedSearch.value = !showAdvancedSearch.value
}

// 获取文件列表
const fetchFileList = async () => {
  loading.value = true
  try {
    // 处理日期范围
    const params = { ...searchForm }
    if (params.dateRange && params.dateRange.length === 2) {
      params.startDate = params.dateRange[0]
      params.endDate = params.dateRange[1]
    }
    delete params.dateRange

    const response = await getFileList(pagination.currentPage, pagination.pageSize, params)
    if (response.code === 200) {
      fileList.value = response.data.records || []
      pagination.total = response.data.total || 0
    } else {
      ElMessage.error(response.message || '获取文件列表失败')
    }
  } catch (error) {
    console.error('获取文件列表失败:', error)
    ElMessage.error('获取文件列表失败')
  } finally {
    loading.value = false
  }
}

// 获取存储统计信息
const fetchStorageStats = async () => {
  try {
    const response = await getUserFileStatistics(currentUser.value?.id || 1)
    if (response.code === 200) {
      Object.assign(storageStats, response.data)
    }
  } catch (error) {
    console.error('获取存储统计失败:', error)
  }
}

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1
  fetchFileList()
}

// 重置搜索
const handleReset = () => {
  Object.assign(searchForm, {
    fileName: '',
    fileType: '',
    uploadUserName: '',
    relatedType: '',
    sizeRange: '',
    dateRange: null
  })
  handleSearch()
}

// 分页改变
const handleSizeChange = (val) => {
  pagination.pageSize = val
  fetchFileList()
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val
  fetchFileList()
}

// 表格选择改变
const handleSelectionChange = (selection) => {
  selectedFiles.value = selection
}

// 文件选择改变
const handleFileChange = (file, fileList) => {
  fileListToUpload.value = fileList
}

// 文件移除
const handleFileRemove = (file, fileList) => {
  fileListToUpload.value = fileList
}

// 文件超出限制
const handleExceed = (files, fileList) => {
  ElMessage.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
}

// 上传文件
const handleUpload = async () => {
  if (fileListToUpload.value.length === 0) {
    ElMessage.warning('请选择要上传的文件')
    return
  }

  if (!uploadFormRef.value) return

  await uploadFormRef.value.validate(async (valid) => {
    if (valid) {
      uploading.value = true
      try {
        const formData = new FormData()

        // 添加访问权限和元数据
        formData.append('accessLevel', uploadForm.accessLevel)
        formData.append('relatedType', uploadForm.relatedType)
        if (uploadForm.relatedId) {
          formData.append('relatedId', uploadForm.relatedId)
        }
        if (uploadForm.description) {
          formData.append('description', uploadForm.description)
        }

        // 获取原始文件列表
        const originalFiles = fileListToUpload.value.map(file => file.raw)

        // 检查是否有图片文件需要压缩
        const imageFiles = originalFiles.filter(file => file.type.startsWith('image/'))

        let processedFiles = originalFiles

        // 如果有图片文件，进行压缩处理
        if (imageFiles.length > 0) {
          ElMessage.info('正在压缩图片文件，请稍候...')

          try {
            // 压缩图片配置
            const compressOptions = {
              maxWidth: 1920,
              maxHeight: 1080,
              quality: 0.8,
              outputFormat: undefined // 保持原格式
            }

            // 压缩图片
            processedFiles = await compressImages(originalFiles, compressOptions, (progress) => {
              console.log(`图片压缩进度: ${progress.progress}%`)
            })

            // 显示压缩结果
            const compressedCount = processedFiles.filter(file =>
              file.compressedSize && file.originalSize !== file.compressedSize
            ).length

            if (compressedCount > 0) {
              let totalSaved = 0
              processedFiles.forEach(file => {
                if (file.compressedSize) {
                  totalSaved += file.originalSize - file.compressedSize
                }
              })
              ElMessage.success(`成功压缩 ${compressedCount} 张图片，节省 ${formatFileSize(totalSaved)} 存储空间`)
            }
          } catch (error) {
            console.warn('图片压缩失败，使用原文件上传:', error)
            ElMessage.warning('图片压缩失败，将使用原文件上传')
            processedFiles = originalFiles
          }
        }

        // 执行文件上传
        if (processedFiles.length === 1) {
          // 单文件上传
          formData.append('file', processedFiles[0])
          await uploadFile(formData)
        } else {
          // 批量上传
          processedFiles.forEach(file => {
            formData.append('files', file)
          })
          await uploadFiles(formData)
        }

        ElMessage.success('文件上传成功')
        showUploadDialog.value = false
        handleDialogClose()
        fetchFileList()
        fetchStorageStats()
      } catch (error) {
        console.error('文件上传失败:', error)
        ElMessage.error('文件上传失败')
      } finally {
        uploading.value = false
      }
    }
  })
}

// 查看文件详情
const handleViewDetail = async (file) => {
  currentFile.value = file
  showDetailDialog.value = true

  // 如果是图片文件，获取预览URL
  if (file.fileType === 'image') {
    try {
      const response = await previewFile(file.id)
      const blob = new Blob([response.data])
      previewImageUrl.value = URL.createObjectURL(blob)
    } catch (error) {
      console.error('获取预览失败:', error)
    }
  }
}

// 预览文件
const handlePreview = async (file) => {
  if (file.fileType !== 'image') {
    ElMessage.warning('只有图片文件可以预览')
    return
  }

  try {
    const response = await previewFile(file.id)
    const blob = new Blob([response.data])
    previewImageUrl.value = URL.createObjectURL(blob)
    showPreviewDialog.value = true
  } catch (error) {
    console.error('预览失败:', error)
    ElMessage.error('预览失败')
  }
}

// 下载文件
const handleDownload = async (file) => {
  try {
    const response = await downloadFile(file.id)
    const blob = new Blob([response.data])
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = file.originalName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
    ElMessage.success('下载成功')
  } catch (error) {
    console.error('下载失败:', error)
    ElMessage.error('下载失败')
  }
}

// 批量下载
const handleBatchDownload = async () => {
  if (selectedFiles.value.length === 0) return

  batchLoading.value = true
  try {
    // 这里可以实现批量下载功能，例如打包成ZIP
    for (const file of selectedFiles.value) {
      await handleDownload(file)
    }
    ElMessage.success('批量下载完成')
  } catch (error) {
    console.error('批量下载失败:', error)
    ElMessage.error('批量下载失败')
  } finally {
    batchLoading.value = false
  }
}

// 批量删除
const handleBatchDelete = async () => {
  if (selectedFiles.value.length === 0) return

  try {
    await ElMessageBox.confirm(`确定要删除选中的 ${selectedFiles.value.length} 个文件吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    batchLoading.value = true
    const promises = selectedFiles.value.map(file => deleteFile(file.id))
    await Promise.all(promises)

    ElMessage.success('批量删除成功')
    selectedFiles.value = []
    fetchFileList()
    fetchStorageStats()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  } finally {
    batchLoading.value = false
  }
}

// 删除文件
const handleDelete = async (file) => {
  try {
    await ElMessageBox.confirm('确定要删除这个文件吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await deleteFile(file.id)
    ElMessage.success('删除成功')
    fetchFileList()
    fetchStorageStats()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 图片处理
const handleImageProcess = (file) => {
  currentFile.value = file
  showImageProcessDialog.value = true
}

// 确认图片处理
const handleImageProcessConfirm = async () => {
  if (!currentFile.value) return

  processing.value = true
  try {
    const formData = new FormData()
    formData.append('file', new Blob([''], { type: 'application/octet-stream' }), currentFile.value.fileName)

    if (activeProcessTab.value === 'compress') {
      formData.append('quality', processForm.compress.quality)
      formData.append('maxWidth', processForm.compress.maxWidth)
      formData.append('maxHeight', processForm.compress.maxHeight)
      formData.append('maintainAspectRatio', processForm.compress.maintainAspectRatio)
      await compressImage(formData)
    } else if (activeProcessTab.value === 'thumbnail') {
      formData.append('width', processForm.thumbnail.width)
      formData.append('height', processForm.thumbnail.height)
      formData.append('cropMode', processForm.thumbnail.cropMode)
      await generateThumbnail(formData)
    } else if (activeProcessTab.value === 'watermark') {
      formData.append('type', processForm.watermark.type)
      if (processForm.watermark.type === 'text') {
        formData.append('text', processForm.watermark.text)
        formData.append('color', processForm.watermark.color)
        formData.append('size', processForm.watermark.size)
      }
      formData.append('position', processForm.watermark.position)
      formData.append('opacity', processForm.watermark.opacity)
      await addWatermark(formData)
    }

    ElMessage.success('图片处理成功')
    showImageProcessDialog.value = false
    fetchFileList()
  } catch (error) {
    console.error('图片处理失败:', error)
    ElMessage.error('图片处理失败')
  } finally {
    processing.value = false
  }
}

// 导出文件列表
const handleExportFiles = () => {
  exportLoading.value = true
  try {
    // 实现导出功能
    ElMessage.info('导出功能开发中...')
  } catch (error) {
    console.error('导出失败:', error)
    ElMessage.error('导出失败')
  } finally {
    exportLoading.value = false
  }
}

// 关闭对话框
const handleDialogClose = () => {
  showUploadDialog.value = false
  if (uploadFormRef.value) {
    uploadFormRef.value.resetFields()
  }
  uploadRef.value?.clearFiles()
  fileListToUpload.value = []
  Object.assign(uploadForm, {
    relatedType: '',
    relatedId: null,
    description: '',
    accessLevel: 'public'
  })
}

  // 工具函数
const getFileTypeTag = (type) => {
  const tagMap = {
    image: 'success',
    document: 'primary',
    certificate: 'warning',
    other: 'info'
  }
  return tagMap[type] || 'info'
}

const getFileTypeText = (type) => {
  const textMap = {
    image: '图片',
    document: '文档',
    certificate: '证书',
    other: '其他'
  }
  return textMap[type] || '其他'
}

const getRelatedTypeText = (type) => {
  const textMap = {
    award: '奖项',
    enrollment: '报名',
    user: '用户',
    project: '项目'
  }
  return textMap[type] || '-'
}

const getFileIcon = (type) => {
  const iconMap = {
    image: 'Picture',
    document: 'Document',
    certificate: 'Medal',
    other: 'Document'
  }
  return iconMap[type] || 'Document'
}

const formatFileSize = (size) => {
  if (size < 1024) {
    return size + ' B'
  } else if (size < 1024 * 1024) {
    return (size / 1024).toFixed(2) + ' KB'
  } else {
    return (size / (1024 * 1024)).toFixed(2) + ' MB'
  }
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN')
}

const formatQuality = (value) => {
  return Math.round(value * 100) + '%'
}

const formatOpacity = (value) => {
  return Math.round(value * 100) + '%'
}

const estimateCompressedSize = () => {
  if (!currentFile.value) return '无法计算'
  const originalSize = currentFile.value.fileSize
  const quality = processForm.compress.quality
  const estimatedSize = Math.round(originalSize * quality)
  return formatFileSize(estimatedSize)
}

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 使用Pinia的logout方法
    authStore.logout()
    // 跳转到登录页
    router.push('/login')
  })
}

// 导航到指定路径
const navigateTo = (path) => {
  router.push(path)
}

// 生命周期钩子
onMounted(() => {
  // 设置表格高度
  setTableHeight()
  window.addEventListener('resize', setTableHeight)

  // 加载数据
  fetchFileList()
  fetchStorageStats()
})

// 组件卸载时移除事件监听
onBeforeUnmount(() => {
  window.removeEventListener('resize', setTableHeight)
})
</script>

<style scoped>
/* 基础样式 */
* {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
}

/* 全局变量 */
:root {
  --primary-color: #2C5AA0;
  --primary-light: #E8EFF9;
  --primary-dark: #1E3D73;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --text-placeholder: #C0C4CC;
  --border-light: #EBEEF5;
  --border-base: #DCDFE6;
  --border-lighter: #F2F6FC;
  --background-base: #F5F7FA;
  --background-light: #FAFAFA;
}

/* 容器布局 */
.app-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
  background-color: var(--background-base);
}

/* 顶部导航栏 */
.header {
  grid-column: 1 / -1;
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 100;
}

.logo {
  font-size: 20px;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.5px;
}

.flex-grow {
  flex-grow: 1;
}

/* 用户信息区域 */
.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.user-avatar:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.username {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

/* 左侧导航栏 */
.sidebar {
  background-color: white;
  padding: 16px 0;
  border-right: 1px solid var(--border-light);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
}

.menu-item {
  padding: 14px 24px;
  color: var(--text-regular);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  font-weight: 500;
  position: relative;
}

.menu-item:hover {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

.menu-item.active {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

.menu-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--primary-color);
}

.menu-item span {
  font-size: 15px;
}

/* 主内容区 */
.content {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 页面标题区域 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}

.page-title h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.page-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* 统计卡片区域 */
.statistics-row {
  margin-bottom: 0;
}

.stat-card {
  transition: all 0.3s ease;
  cursor: default;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.success {
  background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
}

.stat-icon.warning {
  background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
}

.stat-icon.danger {
  background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* 搜索卡片 */
.search-card {
  margin-bottom: 0;
}

.search-card :deep(.el-card__body) {
  padding: 24px;
}

.advanced-search {
  margin-top: 20px;
}

/* 表格卡片 */
.table-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-card :deep(.el-card__body) {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 表格工具栏 */
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-light);
}

.table-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 表格样式 */
:deep(.el-table) {
  flex: 1;
  font-size: 14px;
}

:deep(.el-table th) {
  background-color: var(--background-light) !important;
  color: var(--text-primary);
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 12px 0;
}

:deep(.el-table .el-table__row:hover > td) {
  background-color: var(--primary-light);
}

/* 文件名样式 */
.file-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-icon {
  font-size: 16px;
  color: var(--primary-color);
}

/* 表格操作按钮组 */
:deep(.el-button-group .el-button) {
  margin-left: 0;
}

:deep(.el-button-group .el-button + .el-button) {
  margin-left: 1px;
}

/* 分页容器 */
.pagination-container {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--border-light);
}

/* 批量操作栏 */
.batch-operations {
  padding: 16px 24px;
  background-color: var(--primary-light);
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.batch-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--primary-color);
}

.batch-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 对话框样式 */
:deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-dialog__header) {
  background-color: var(--primary-color);
  color: white;
  padding: 20px 24px;
}

:deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
}

:deep(.el-dialog__body) {
  padding: 24px;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid var(--border-light);
}

/* 表单样式 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: var(--text-primary);
}

:deep(.el-input__inner) {
  border-radius: 4px;
}

:deep(.el-select .el-input .el-input__inner) {
  border-radius: 4px;
}

/* 上传组件样式 */
:deep(.el-upload-dragger) {
  border-radius: 8px;
  border: 2px dashed var(--border-base);
  transition: all 0.3s;
}

:deep(.el-upload-dragger:hover) {
  border-color: var(--primary-color);
}

/* 预览容器 */
.preview-container {
  text-align: center;
}

/* 文件详情样式 */
.file-detail {
  padding: 8px 0;
}

.image-preview {
  margin-top: 20px;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
}

:deep(.el-descriptions__content) {
  color: var(--text-regular);
}

/* 对话框底部 */
.dialog-footer {
  text-align: right;
}

/* 上传提示 */
.el-upload__tip {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 8px;
}

/* 按钮激活状态 */
:deep(.el-button.is-active) {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

/* 标签页样式 */
:deep(.el-tabs--border-card) {
  border: 1px solid var(--border-base);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item) {
  color: var(--text-regular);
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  color: var(--primary-color);
  background-color: white;
}

/* 消息提示样式 */
:deep(.el-message) {
  border-radius: 4px;
}

:deep(.el-message-box) {
  border-radius: 8px;
}

/* 桌面端样式优化 */
.app-container {
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
}

/* 动画效果 */
.el-fade-in-enter-active,
.el-fade-in-leave-active {
  transition: opacity 0.3s ease;
}

.el-fade-in-enter-from,
.el-fade-in-leave-to {
  opacity: 0;
}

.el-zoom-in-enter-active,
.el-zoom-in-leave-active {
  transition: all 0.3s ease;
}

.el-zoom-in-enter-from,
.el-zoom-in-leave-to {
  transform: scale(0.9);
  opacity: 0;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-base);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-placeholder);
}
</style>